<template>
    <div class="index" v-scroll="getMoreProduct">
        <div class="container">
            <div class="swiper-box">
                <div class="nav-menu">
                    <ul class="menu-wrap">
                        <li class="menu-item" v-for="item in menuList" :key="item.id">
                            <a href="javascript:;">{{ item.name }}</a>
                            <div class="children">
                                <ul>
                                    <li v-for="(sub, j) in item.childList" :key="j">
                                        <a :href="'/#/category/' + sub.id"> 
                                            {{ sub.name }}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>

                <swiper :options="swiperOption">
                    <swiper-slide v-for="(item, index) in slideList" :key="index">
                        <a :href="'/#/category/' + item.id"><img :src="item.img" /></a>
                    </swiper-slide>
                    <!-- Optional controls -->
                    <div class="swiper-pagination" slot="pagination"></div>
                    <!-- <div class="swiper-button-prev" slot="button-prev"></div>
                    <div class="swiper-button-next" slot="button-next"></div> -->
                </swiper>
            </div>

            <!-- <div class="ads-box">
                <a :href="'/#/detail/' + item.id" v-for="(item, index) in adsList" :key="index">
                    <img v-lazy="item.img" />
                </a>
            </div> -->

            <!-- <div class="banner">
                <a href="/#/detail/30">
                    <img v-lazy="" />
                </a>
            </div> -->
        </div>

        <div class="product-box" v-if="China.length > 0">
            <div class="container">
                <h2>中国馆</h2>
                <div class="wrapper">
                    <div class="banner-left">
                        <img src="/imgs/side1.jpg" alt="" />
                    </div>

                    <div class="list-box">
                        <div class="list" v-for="(item, i) in China" :key="i">
                            <a :href="'/#/detail/' + item.id">
                                <div class="item">
                                    <!-- <span :class="{ 'new-pro': i % 2 == 0 }">新品</span> -->
                                    <div class="item-img">
                                        <img v-lazy="$img + item.pic" />
                                    </div>
                                    <div class="item-info">
                                        <h3>{{ item.name }}</h3>
                                        <p>{{ item.subtitle }}</p>
                                        <p class="price" @click="addCart(item.id)">{{ item.price }}元</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-box" v-if="Japan.length > 0">
            <div class="container">
                <h2>日本馆</h2>
                <div class="wrapper">
                    <div class="banner-left">
                        <img src="/imgs/side2.jpg" alt="" />
                    </div>
                    <div class="list-box">
                        <div class="list" v-for="(item, i) in Japan" :key="i">
                            <a :href="'/#/detail/' + item.id">
                                <div class="item">
                                    <!-- <span :class="{ 'new-pro': i % 2 == 0 }">新品</span> -->
                                    <div class="item-img">
                                        <img v-lazy="$img + item.pic" />
                                    </div>
                                    <div class="item-info">
                                        <h3>{{ item.name }}</h3>
                                        <p>{{ item.subtitle }}</p>
                                        <p class="price" @click="addCart(item.id)">{{ item.price }}元</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-box" v-if="Europe.length > 0">
            <div class="container">
                <h2>欧洲馆</h2>
                <div class="wrapper">
                    <div class="banner-left">
                        <img src="/imgs/side3.jpg" alt="" />
                    </div>
                    <div class="list-box">
                        <div class="list" v-for="(item, i) in Europe" :key="i">
                            <a :href="'/#/detail/' + item.id">
                                <div class="item">
                                    <!-- <span :class="{ 'new-pro': i % 2 == 0 }">新品</span> -->
                                    <div class="item-img">
                                        <img v-lazy="$img + item.pic" />
                                    </div>
                                    <div class="item-info">
                                        <h3>{{ item.name }}</h3>
                                        <p>{{ item.subtitle }}</p>
                                        <p class="price" @click="addCart(item.id)">{{ item.price }}元</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Loading v-if="loading" />
        <ServiceBar></ServiceBar>

        <Modal
            title="提示"
            sureText="查看购物车"
            cancelText="取消"
            btnType="3"
            modalType="middle"
            :showModal="showModal"
            @submit="goToCart"
            @cancel="showModal = false"
        >
            <template v-slot:body>
                <p>商品添加成功！</p>
            </template>
        </Modal>
    </div>
</template>
<script>
import ServiceBar from './../components/ServiceBar';
import Loading from './../components/Loading';
import Modal from './../components/Modal';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
export default {
    name: 'index',
    components: {
        swiper,
        swiperSlide,
        ServiceBar,
        Loading,
        Modal
    },
    directives: {
        scroll: {
            bind: function (el, binding) {
                window.addEventListener('scroll', function () {
                    // console.log(document.documentElement.scrollTop,document.documentElement.clientHeight, document.documentElement.scrollHeight)
                    if (
                        document.documentElement.scrollTop + document.documentElement.clientHeight >=
                        document.documentElement.scrollHeight - 300
                    ) {
                        let loadData = binding.value;
                        loadData();
                    }
                });
            }
        }
    },
    data() {
        return {
            swiperOption: {
                autoplay: true,
                loop: true,
                effect: 'cube',
                cubeEffect: {
                    // shadowOffset: 100,
                    // shadowScale: 0.6
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            },
            slideList: [
                {
                    id: '42',
                    img: 'http://51newland.cn/themes/new_land/images/10000.jpg'
                },
                {
                    id: '45',
                    img: '/imgs/slider/slide-2.jpg'
                },
                {
                    id: '46',
                    img: 'http://51newland.cn/themes/new_land/images/10000.jpg'
                },
                {
                    id: '49',
                    img: '/imgs/slider/slide-4.jpg'
                }
            ],
            menuList: [],
            phoneList: [],
            loading: false,
            showModal: false,
            China: [],
            Europe: [],
            Japan: [],
            noMore: false
        };
    },
    mounted() {
        this.init();
        console.log(this.$img);
    },
    methods: {
        init() {
            this.$http.get('/api/home/productCategory/list').then((res) => {
                console.log(res);
                this.menuList = res;
            });

            this.getProduct();
        },
        getMoreProduct() {},
        async getProduct() {
            if (this.noMore) {
                return false;
            }
            if (!this.loading) {
                this.loading = true;

                let { China, Europe, Japan } = await this.$http.get('/api/home/goods/area/list');
                this.China = China.slice(0,8);
                this.Europe = Europe.slice(0,8);
                this.Japan = Japan.slice(0,8);
                this.loading = false;
            }
        },
        addCart(id) {
            this.$http
                .post('/carts', {
                    productId: id,
                    selected: true
                })
                .then((res) => {
                    this.showModal = true;
                    this.$store.dispatch('saveCartCount', res.cartTotalQuantity);
                });
        },
        goToCart() {
            this.$router.push('/cart');
        }
    }
};
</script>
<style lang="scss">
@import './../assets/scss/config.scss';
@import './../assets/scss/mixin.scss';
.index {
    margin-top: 15px;
    .swiper-box {
        padding-bottom: 20px;
        .nav-menu {
            position: absolute;
            width: 264px;
            height: 451px;
            z-index: 5;
            padding: 26px 0;
            // 带透明度的背景色
            background-color: #55585a7a;
            box-sizing: border-box;
            .menu-wrap {
                .menu-item {
                    height: 50px;
                    line-height: 50px;
                    a {
                        position: relative;
                        display: block;
                        font-size: 16px;
                        color: #ffffff;
                        padding-left: 30px;
                        &:after {
                            position: absolute;
                            right: 30px;
                            top: 17.5px;
                            content: ' ';
                            @include bgImg(10px, 15px, '/imgs/icon-arrow.png');
                        }
                    }
                    &:hover {
                        background-color: $colorA;
                        .children {
                            display: block;
                        }
                    }
                    .children {
                        display: none;
                        width: 300px;
                        height: 451px;
                        background-color: $colorG;
                        position: absolute;
                        top: 0;
                        left: 264px;
                        border: 1px solid $colorH;
                        overflow: hidden;
                        ul {
                            display: flex;
                            justify-content: space-between;
                            flex-wrap: wrap;
                            height: 75px;
                            li {
                                height: 75px;
                                line-height: 75px;
                                width: 192px;
                                // padding-left: 23px;
                                a {
                                    color: $colorB;
                                    font-size: 14px;
                                    img {
                                        width: 42px;
                                        height: 35px;
                                        vertical-align: middle;
                                        margin-right: 15px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .swiper-container {
            height: 451px;
            .swiper-button-prev {
                left: 274px;
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .ads-box {
        @include flex();
        margin-top: 14px;
        margin-bottom: 31px;
        a {
            width: 296px;
            height: 167px;
            // img{  base.scss写过了
            //   width:100%;
            //   height:100%;
            // }
        }
    }
    .banner {
        margin-bottom: 50px;
        margin-top: 50px;
    }
    .product-box {
        background-color: $colorJ;
        padding: 30px 0 50px;
        h2 {
            font-size: $fontF;
            height: 21px;
            line-height: 21px;
            color: $colorB;
            margin-bottom: 20px;
        }
        .wrapper {
            display: flex;
            .banner-left {
                margin-right: 15px;
                height: 552px;
                img {
                    display: block;
                    width: 224px;
                    height: 552px;
                    object-fit: cover;
                }
            }
            .list-box {
                width: 100%;
                .list {
                    float: left;
                    width: 25%;
                    box-sizing: border-box;
                    height: 290;
                    padding: 7px;
                    margin-bottom: 5px;
                    &:nth-child(n + 5) {
                        margin-bottom: 0;
                        padding-bottom: 0;
                    }
                    padding-top: 0; 
                    .item {
                        width: 236px;
                        height: 270px;
                        background-color: $colorG;
                        text-align: center;
                        span {
                            display: inline-block;
                            width: 67px;
                            height: 24px;
                            font-size: 14px;
                            line-height: 24px;
                            color: $colorG;
                            &.new-pro {
                                background-color: #7ecf68;
                            }
                            &.kill-pro {
                                background-color: #e82626;
                            }
                        }
                        .item-img {
                            img {
                                width: 100%;
                                height: 195px;
                            }
                        }
                        .item-info {
                            h3 {
                                font-size: 14px;
                                color: $colorB;
                                line-height: 14px;
                                font-weight: bold;
                                margin-top: 10px;
                            }
                            p {
                                color: $colorD;
                                line-height: 13px;
                                margin: 6px auto 13px;
                            }
                            .price {
                                color: #f20a0a;
                                font-size: $fontJ;
                                font-weight: bold;
                                cursor: pointer;
                                &:after {
                                    @include bgImg(22px, 22px, '/imgs/icon-cart-hover.png');
                                    content: ' ';
                                    margin-left: 5px;
                                    vertical-align: middle;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
